<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="title">标题</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['title']">
        <input type="text" nz-input formControlName="title" placeholder="标题">
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入标题</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过60个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="sortNum">排序号</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['sortNum']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'排序号'" formControlName="sortNum"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('sortNum').dirty && validateForm.get('sortNum').hasError('required')">请输入排序号</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="type">商品类型</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['type']">
        <nz-radio-group formControlName="type">
          <label nz-radio [nzValue]="1">普通商品</label>
          <label nz-radio [nzValue]="2">现金商品</label>
        </nz-radio-group>
        <nz-form-explain
          *ngIf="validateForm.get('type').dirty && validateForm.get('type').hasError('required')">
          请选择是否继承积分规则
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="stock">可兑换数</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['stock']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'可兑换数'" formControlName="stock"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('stock').dirty && validateForm.get('stock').hasError('required')">请输入可兑换数</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('stock').dirty && validateForm.get('stock').hasError('min')">可兑换数不能小于0</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="originPrice">市场价/现金</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['originPrice']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'市场价/现金'" formControlName="originPrice"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('originPrice').dirty && validateForm.get('originPrice').hasError('required')">请输入市场价/现金</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('originPrice').dirty && validateForm.get('originPrice').hasError('min')">市场价/现金不能小于0</nz-form-explain>
        <nz-form-extra style="color: orange;">说明： 类型为普通商品是代表商品市场价，类型为现金商品是代表兑换可获得的现金<br/>
          请注意可获得的现金需满足管理商户号设置（芪枣健胃茶APP公众号关联的商户号）
        </nz-form-extra>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="validateForm.value.type == 1">
      <nz-form-label [nzSpan]="6" nzRequired nzFor="needCredit">普通积分</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['needCredit']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'兑换所需普通积分'" formControlName="needCredit"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('needCredit').dirty && validateForm.get('needCredit').hasError('required')">请输入兑换所需普通积分</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('needCredit').dirty && validateForm.get('needCredit').hasError('min')">所需普通积分不能小于0</nz-form-explain>
      </nz-form-control>
    </nz-form-item><nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired nzFor="needTakCredit">TAK积分</nz-form-label>
    <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['needTakCredit']">
      <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'兑换所需TAK积分'" formControlName="needTakCredit"></nz-input-number>
      <nz-form-explain *ngIf="validateForm.get('needTakCredit').dirty && validateForm.get('needTakCredit').hasError('required')">请输入兑换所需TAK积分</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('needTakCredit').dirty && validateForm.get('needTakCredit').hasError('min')">所需TAK积分不能小于0</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="mainImg">商品主图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainImg']">
        <input type="text" nz-input formControlName="mainImg" placeholder="商品主图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainImg">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传商品主图</div>
          </ng-container>
          <img *ngIf="entity.mainImg" [src]="entity.mainImg|qCloudDomain" title="点击可修改主图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainImg').dirty && validateForm.get('mainImg').hasError('required')">
          请选择商品主图
        </nz-form-explain>
      </nz-form-control>
      <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约750*490的图片</nz-form-extra>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="description">简介</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['description']">
        <textarea rows="3" nz-input formControlName="description" placeholder="简介"></textarea>
        <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('required')">请输入简介</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('maxlength')">不能超过100个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="content">
        详细介绍
      </nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['content']" class="content-class">
        <textarea rows="6" nz-input formControlName="content" placeholder="详细介绍" style="display: none;"></textarea>
        <div id="content-section" title="点击可进行内容编辑修改" (click)="showEdit()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #content></div>
        <nz-form-explain *ngIf="validateForm.get('content').dirty && validateForm.get('content').hasError('required')">请输入详细介绍</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>
  <full-screen-editor [contentVal]="entity.content" (close)="showEdit()" (contentCallback)="contentCallback($event)" *ngIf="isShow"></full-screen-editor>
</nz-card>
